<template>
  <a-modal
    :title="title"
    :width="700"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="余额">
          <a-row>
            <a-col :span="14" style="align-items: center">
              <p style="font-weight: 500" v-decorator="['payFee',{}]">{{ this.modal.payFee }}</p>
            </a-col>
            <a-col :span="10" >
              <p style="font-size: 10px;font-weight: 200;margin-bottom: 0px;text-align: right">上限{{ this.maxPayFee }}元</p>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="充值金额">
          <a-row >
            <a-col :span="10">
              <a-input-number
                :autoFocus="true"
                style="width: 100%"
                :min="this.maxPayFee*-1"
                :max="this.maxPayFee"
                v-decorator="['fee',{initialValue:0}]"></a-input-number>
            </a-col>
            <a-col :span="7" align="center">
              <a @click="setMaxPay()">满额</a>
              <a-divider type="vertical"></a-divider>
              <a @click="setMinPay()">清零</a>
            </a-col>
            <a-col :span="7" >
              <p style="font-size: 10px;font-weight: 200;margin-bottom: 0px;text-align: right">充值金额至少为1元</p>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {postAction} from "@api/manage";

export default {
  name: "ParkCarStoredRechargeModal",
  data(){
    return {
      title:'',
      visible:false,
      confirmLoading:false,
      maxPayFee:'',
      form:this.$form.createForm(this),
      url:{
        recharge:'/parkCar/parkCarStored/Recharge',
        getMaxFee:'/parkCar/parkCarStored/getMaxFee'
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
      },
      modal: {},
    }
  },
  methods:{
    handleOk(){
      let params = {}
      params.id = this.modal.id
      params.payFee = this.modal.payFee
      params.fee = this.form.getFieldValue('fee')
      this.confirmLoading = true
      postAction(this.url.recharge,params).then(res=>{
        if(res.success)
        {
          this.$message.success(res.message)
          this.close()
        }else{
          this.$message.error(res.message)
          this.confirmLoading = false
        }
      })
    },
    handleCancel(){
     this.close()
    },
    edit(record){
      this.form.resetFields()
      this.loadMaxPay(record)
    },
    loadMaxPay(record){
      const that = this
     postAction(this.url.getMaxFee).then(res=>{
       if(res.success)
       {
         this.maxPayFee = res.result
         Object.assign(that.modal,record)
         this.confirmLoading = false
         this.visible = true
         this.fee = 0
       }
       else {
         this.$message.error("未获取储值车可充值的最大余额")
       }
     })
    },
    close() {
      this.$emit('Refresh');
      this.modal = {}
      this.visible = false;
    },
    setMaxPay(){
      let fee = this.maxPayFee - this.modal.payFee
      this.form.setFieldsValue({fee:fee})
    },
    setMinPay(){
      let fee = this.modal.payFee * -1
      this.form.setFieldsValue({fee:fee})
    },
    keyupEnter() {
      document.onkeydown = e => {
        if (e.keyCode === 13) {
          this.handleOk();
        }
      }
    },
  }
}

</script>

<style scoped>
/deep/ .ant-form-item
{
  margin-bottom: 0px;
}
</style>
